<template> 
	<el-card class="form-container" shadow="never">
		<el-form :model="centerH5" :rules="rules" ref="centerH5From" label-width="150px" size="small">
			<el-form-item label="图片：">
				<single-upload v-model="centerH5.pic"></single-upload>
			</el-form-item>
			<!-- <el-form-item label="排序：">
				<el-input v-model="centerH5.sort" class="input-width"></el-input>
			</el-form-item> -->
			<el-form-item>
				<el-button type="primary" @click="onSubmit('centerH5From')">提交</el-button>
				<el-button v-if="!isEdit" @click="resetForm('centerH5From')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script>
	import SingleUpload from '@/components/Upload/singleUpload'
	import {
		getCenterH5,
		updateCenterH5
	} from '@/api/centers/centerH5'
	const defaultCenterH5 = {
		pic: null,
		sort: 0,
	};
	export default {
		name: 'CenterH5Detail',
		components: {
			SingleUpload
		},
		props: {
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				centerH5: {},
				rules: {},
			}
		},
		created() {
			if (this.isEdit) {
				getCenterH5(this.$route.query.id).then(response => {
					this.centerH5 = response.data;
				});
			} else {
				this.centerH5 = Object.assign({}, defaultCenterH5);
			}
		},
		methods: {
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('是否提交数据', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							if (this.isEdit) {
								updateCenterH5(this.$route.query.id, this.centerH5).then(response => {
									if (response.code == 200) {
										this.$message({
											message: '修改成功',
											type: 'success',
											duration: 1000
										});
										this.$router.back();
									}
								});
							} else {
								createCenterH5(this.centerH5).then(response => {
									if (response.code == 200) {
										this.$message({
											message: '提交成功',
											type: 'success',
											duration: 1000
										});
										this.$router.back();
									}
								});
							}
						});

					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.centerH5 = Object.assign({}, defaultCenterH5);
			}
		}
	}
</script>
<style scoped>
	.input-width {
		width: 70%;
	}
</style>
